<template>
<div class="w">
	<div class="form-title" style="margin-bottom:4px;">填写调查问卷（带*的题目为必填项）</div>
	<div class="form-title" style="margin-top:0; border:0; font-weight:normal;"><span style="font-size:12px; color:#999">参与问卷调查，您的信息将有助于主办方提供更好的服务</span></div>
	<div class="form-data">
		<el-form ref="dataForm" label-position="top">
			<el-form-item  class="is-success is-required"  v-for="(items,index) in list" :key="index" :label="index+1+'.'+items.title">
				
				<template v-if="items.titleRelList && items.titleRelList.length > 0">
					<template v-for = "(item,ssindex) in items.titleRelList">
						<div><b>{{index+1+'.'+ssindex+1}}{{item.titleName}}</b></div>
            <template v-if="item.children && item.children.length > 0">
							<div v-for="subItem in item.children" :key="subItem.uuid">
								<el-checkbox-group v-model="subItem.answer">
									<el-checkbox v-for="subSubItem in subItem.optionsList" :key="subSubItem.uuid" @change="goToSelect(subItem)" :label="subSubItem.uuid">{{subSubItem.optionTitle}}</el-checkbox>
									<el-checkbox label="otherAnswer" :disabled="subItem.answerFlag">
										其它，请注明：<el-input size="mini" :disabled="subItem.answerFlag" style=" margin-left:12px; width:300px;" v-model="subItem.otherAnswer" placeholder="请输入您的信息"></el-input>
									</el-checkbox>
								</el-checkbox-group> 							
							</div>	           
            </template>
            <template v-else>
              <el-checkbox-group :max="item.maxSelect == 0 ? item.optionsList.length : item.maxSelect"  v-model="item.answer" >
                <el-checkbox v-for="(subItem,idx) in item.optionsList"  @change="goToSelect(item)" :label="subItem.uuid">{{subItem.optionTitle}}</el-checkbox>
                <br/>
                <el-checkbox label="otherAnswer" :disabled="item.answerFlag">
                  其它，请注明：<el-input size="mini" :disabled="item.answerFlag" style=" margin-left:12px; width:300px;" v-model="item.otherAnswer" placeholder="请输入您的信息"></el-input>
                </el-checkbox>						
              </el-checkbox-group>            	
            </template>
            						
					</template>
				</template>
				<template v-else>
					<el-radio-group v-if="items.questionType == 1" v-model="items.answer">
						<el-radio v-for="(item,idxs) in items.optionsModels" :label="item.uuid">{{item.optionTitle}}</el-radio>
						<el-radio label="otherAnswer">
							其它，请注明：<el-input size="mini" style=" margin-left:12px; width:300px;" v-model="items.otherAnswer" placeholder="请输入您的信息"></el-input>
						</el-radio>
					</el-radio-group>	
					<el-checkbox-group v-if="items.questionType == 2"  :max="items.maxSelect"  v-model="items.answer" >
						<el-checkbox v-for="(item,idx) in items.optionsModels" @change="goToSelect(items)" :label="item.uuid">{{item.optionTitle}}</el-checkbox>
						<el-checkbox label="otherAnswer" :disabled="items.answerFlag">
							其它，请注明：<el-input size="mini" :disabled="items.answerFlag" style=" margin-left:12px; width:300px;" v-model="items.otherAnswer" placeholder="请输入您的信息"></el-input>
						</el-checkbox>
					</el-checkbox-group>
					<template v-if="items.questionType == 3">
						<el-input type="textarea" style="width:500px;" v-model="items.otherAnswer" placeholder="请输入您的信息"></el-input>
					</template>					
				</template>
			
			</el-form-item>	
			<el-form-item label=" ">
				<el-button  type="primary" @click="goToNext" :loading="btnLoad" style=" width:160px;">下一步</el-button> 
				<!--
        <el-button @click="goToPrev" style="background:#fff !important; color:#68BCBC; width:160px;">返回</el-button> 
				-->
      </el-form-item>				
			
		</el-form>				
	</div>
</div>
</template>
<script>
import config from "@/config";
export default {
  data() {
    return {
			btnLoad:false,
			list:[],
    };
  },
	mounted() {
		this.id = this.$route.query.id ? this.$route.query.id : '';	
		this.map = {
			exhibitionUuid:this.id,
			token : config.userInfo.token,
			sessionId : config.userInfo.sessionId,
			customerUuid : config.userInfo.customer.uuid			
		};		
		this.getQuList();
	},
	methods: {
		async getQuList(){
			var param = config.setFormData('getQuestionNaire',this.map)
			var res = await this.$http.post(config.appCall,param);
			var _list = res.data.questions.map(item =>{
				item.answer = [];
				item.otherAnswer = '';
				item.answerFlag = false;
				if(item.titleRelList && item.titleRelList.length > 0){
					item.titleRelList.map(subItem => {
						subItem.answer = [];
						subItem.answerFlag = false;
						subItem.otherAnswer = '';							
						if(subItem.children && subItem.children.length > 0){
							subItem.children.map(subsubItem => {
								subsubItem.answer = [];
								subsubItem.answerFlag = false;
								subsubItem.otherAnswer = '';
							})	
						}
					})
				}
				return item;
			})
			this.questionnaireUuid = res.data.questionnaireUuid;
			this.list = _list;
		},
		goToSelect(items){
			
			if(items.answer.length > 0){
				items.answerFlag = true;
				var index = items.answer.indexOf('otherAnswer');
				if (index > -1) {
					items.answer.splice(index, 1);
				}		
			}else{
				items.answerFlag = false;
			}
		},
		goToPrev(){
			this.$emit('input', 1)	
			window.scrollTo({top:0})
		},
		async goToNext(){
			var _map = {...this.map};
			_map.exhibitionUuid = this.id;
			_map.questionnaireUuid = this.questionnaireUuid;
			_map.orgUuid = '';
      _map.inviterUuid = '';
      _map.channelUuid = '';
      _map.channelType = '';
			_map.questionAnswer = [];
			var _qalist = [];

			this.list.forEach(item=>{
				if(item.titleRelList && item.titleRelList.length > 0){
					item.titleRelList.forEach(subItem =>{
						if(subItem.children && subItem.children.length > 0){
							subItem.children.forEach(subSubItem => {
								var obj = {};
								obj.answer = subSubItem.answer.join(',');
								obj.questionUuid = item.uuid;
								obj.questionTitleUuid = subSubItem.uuid;
								obj.questionTitleParentUuid = subItem.uuid;
								if(subSubItem.answer == 'otherAnswer'){
									obj.otherAnswer	= subSubItem.otherAnswer;
								};									
								_qalist.push(obj);
							})
						}else{
							var obj = {};
							obj.answer = subItem.answer.join(',');
							obj.questionUuid = item.uuid;
							obj.questionTitleUuid = subItem.uuid;
							obj.questionTitleParentUuid = '';
							if(subItem.answer == 'otherAnswer'){
								obj.otherAnswer	= subItem.otherAnswer;
							};						
							_qalist.push(obj);
						}
					})
				}else{
					var obj = {};
					if(item.questionType == 3){
						item.answer = 'otherAnswer';
						obj.answer = 'otherAnswer';
					}else{
						obj.answer = item.questionType == 2 ? item.answer.join(',') : item.answer;
					}
					obj.answer = obj.answer.length == 0 ?　'' : obj.answer;
					obj.questionUuid = item.uuid;
					obj.questionTitleUuid = '' ;
					obj.questionTitleParentUuid = '';
					if(item.answer == 'otherAnswer'){
						obj.otherAnswer	= item.otherAnswer;
					}
					_qalist.push(obj);					
				}
			});
			_map.questionAnswer = _qalist;	
			var _isGo = true;
			for(var i = 0;i<_qalist.length; i++){
				if(_qalist[i].answer == ''){
					_isGo = false;
					break;	
				}
			}				
			if(!_isGo){this.$message.error('请选择相关选项！');  return;}
			this.btnLoad = true;
			var param = config.setFormData('saveQuestionAnswer',_map)
		  var res = await this.$http.post(config.appCall,param);			
			this.btnLoad = false;
			if(res.data && res.data.return_code == '0'){
				setTimeout(()=>{
					this.$emit('input', 3)
					this.$router.replace({path: 'index', query: {'id': this.id,'tab':3}});	
					window.scrollTo({top:0})
				},300)
			}else{
				this.$message.error(res.data.message);	
			}
		},		
	}
}
</script>
<style scoped>
.form-data{ width:700px; margin:0 auto;}
.form-title{ font-size:16px; font-weight:bold; border-left:4px solid #A5E2DC; width:680px; padding-left:10px; margin:25px auto;}
.has-country >>> input::-webkit-input-placeholder {color: #606266;}
.form-data >>> .el-form-item__label{ font-size:15px; font-weight:bold; }
.form-data >>> .el-radio{ padding:15px 0;}
</style>
